Simple app that consumes Angular Material 2 components
I'm Jeremy. I've been a software engineer at Google since 2012 and I currently work on the Angular team. I ocassionally use my Google 20% time to advance the use of Sass inside Google.
I've given a bunch of talks about building components with Angular
I read a lot of scfi-fi and fantasy. I play a game now and then.
So far, the only way I've found to customise the width of the dropdowns is to add a class to md-option and then add the custom width to the select.component.ts file... which is terrible practice. Ideally, the width of the dropdowns should be the same with as md-select component, or at least be able to grab styles from the select.component.scss file.
For example, I've had to add this to the select.component.ts file:
I should be adding these styles to the select.component.scss file like this instead, but it doesn't do anything.
Is there a better way to have custom widths or get the dropdown widths to match the width of the select component?
One of the main focus of material2 should be that the app is working in IE11 and Windows 10, so that the ui-framework can be used in all kinds of enterprise apps...
Thanks,
Jens
After patching to avoid AoT compiling, see #28,
after updating project with
npm-check-updates -u
npm install
npm update
npm install
It complains about not finding files that actually exist:
npm start
> [email protected] start .../material2-app
> ng serve
** NG Live Development Server is running on http://localhost:4200. **
Hash: cae9759af9d2ae4f4ffe
Time: 11522ms
chunk {0} styles.bundle.js, styles.bundle.map (styles) 50.7 kB {3} [initial] [rendered]
chunk {1} main.bundle.js, main.bundle.map (main) 6.68 kB {2} [initial] [rendered]
chunk {2} vendor.bundle.js, vendor.bundle.map (vendor) 3.59 MB [initial] [rendered]
chunk {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]
ERROR in MaterialAppModule is not an NgModule
ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve 'app.component.html' in '.../material2-app/src/app'
@ ./src/app/app.component.ts 47:18-47
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi main
ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve 'app.component.css' in '.../material2-app/src/app'
@ ./src/app/app.component.ts 48:17-45
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi main
webpack: bundle is now VALID.
Based on angular/angular-cli#3426 I tried
npm install --save [email protected]
Which solved ERROR in MaterialAppModule is not an NgModule
Then based on angular/angular-cli#3426
npm install --save angular-cli
Which brought back the problem that was observed in #28;
patterns.map is not a function
TypeError: patterns.map is not a function
at GlobCopyWebpackPlugin.apply (.../material2-app/node_modules/angular-cli/plugins/glob-copy-webpack-plugin.js:16:29)
at Compiler.apply (.../material2-app/node_modules/tapable/lib/Tapable.js:270:16)
at WebpackOptionsApply.process (.../material2-app/node_modules/webpack/lib/WebpackOptionsApply.js:59:18)
at webpack (.../material2-app/node_modules/webpack/lib/webpack.js:28:48)
at Class.run (.../material2-app/node_modules/angular-cli/tasks/serve-webpack.js:38:27)
at .../material2-app/node_modules/angular-cli/commands/serve.js:108:26
at process._tickCallback (internal/process/next_tick.js:103:7)
Ubuntu 16.04 AMD64
node --version
v6.9.2
{
"name": "m2-app",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "^2.0.0",
"@angular/compiler": "^2.0.0",
"@angular/core": "^2.0.0",
"@angular/forms": "^2.0.0",
"@angular/http": "^2.0.0",
"@angular/material": "2.0.0-beta.1",
"@angular/platform-browser": "^2.0.0",
"@angular/platform-browser-dynamic": "^2.0.0",
"@angular/router": "^3.0.0",
"angular-cli": "^1.0.0-beta.24",
"core-js": "^2.4.0",
"rxjs": "5.0.2",
"ts-helpers": "^1.1.1",
"typescript": "^2.0.10",
"zone.js": "^0.7.4"
},
"devDependencies": {
"@angular/compiler-cli": "^2.0.0",
"@angular/platform-server": "^2.0.0",
"@types/hammerjs": "^2.0.32",
"@types/jasmine": "^2.2.30",
"angular-cli": "^1.0.0-beta.16",
"codelyzer": "~2.0.0-beta.4",
"firebase-tools": "^3.0.7",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.7.0",
"karma": "1.3.0",
"karma-chrome-launcher": "2.0.0",
"karma-jasmine": "1.1.0",
"karma-remap-istanbul": "^0.4.0",
"protractor": "4.0.14",
"ts-node": "2.0.0",
"tslint": "4.2.0",
"typescript": "^2.0.2"
}
}
Now clueless. What to do?
Thanks.
The latest version of material2 has some name changes but they don't reflect here yet.
import {MaterialAppModuleNgFactory} from './aot/app/app.module.ngfactory';
https://github.com/jelbourn/material2-app/blob/master/src/main.ts#L25
Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options. Error: Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options. at Object.resolveEntryModuleFromMain (/home/alekhin/workspace/angular2/material-from-git/material2-app/node_modules/@ngtools/webpack/src/entry_resolver.js:128:11) at AotPlugin._setupOptions (/home/alekhin/workspace/angular2/material-from-git/material2-app/node_modules/@ngtools/webpack/src/plugin.js:142:50) at new AotPlugin (/home/alekhin/workspace/angular2/material-from-git/material2-app/node_modules/@ngtools/webpack/src/plugin.js:26:14) at Object.exports.getNonAotConfig (/home/alekhin/workspace/angular2/material-from-git/material2-app/node_modules/angular-cli/models/webpack-configs/typescript.js:26:13) at new NgCliWebpackConfig (/home/alekhin/workspace/angular2/material-from-git/material2-app/node_modules/angular-cli/models/webpack-config.js:24:37) at Class.run (/home/alekhin/workspace/angular2/material-from-git/material2-app/node_modules/angular-cli/tasks/serve.js:31:29) at /home/alekhin/workspace/angular2/material-from-git/material2-app/node_modules/angular-cli/commands/serve.run.js:22:22 at process._tickCallback (internal/process/next_tick.js:103:7)
If I'll update all dependencies, I've get the same exception...
Why your example is not work "from box"?
I get an error when I try to start the application
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v6.9.2
npm ERR! npm v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: ng serve
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'ng serve'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the m2-app package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ng serve
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs m2-app
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls m2-app
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Kevin\Projects\AngularIo\material2-app\npm-debug.log
node is v6.9.2. npm is 3.10.9.
There isn't a 'npm-debug.log' that gives much more information.
When I run 'ng serve' directly I get
Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
Error: Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
at Object.resolveEntryModuleFromMain (C:\Users\Kevin\Projects\AngularIo\material2-app\node_modules@ngtools\webpack\src\entry_resolver.js:131:11)
at AotPlugin._setupOptions (C:\Users\Kevin\Projects\AngularIo\material2-app\node_modules@ngtools\webpack\src\plugin.js:158:54)
at new AotPlugin (C:\Users\Kevin\Projects\AngularIo\material2-app\node_modules@ngtools\webpack\src\plugin.js:17:14)
at Object.exports.getWebpackNonAotConfigPartial (C:\Users\Kevin\Projects\AngularIo\material2-app\node_modules\angular-cli\models\webpack-build-typescript.js:20:13)
at new NgCliWebpackConfig (C:\Users\Kevin\Projects\AngularIo\material2-app\node_modules\angular-cli\models\webpack-config.js:23:42)
at Class.run (C:\Users\Kevin\Projects\AngularIo\material2-app\node_modules\angular-cli\tasks\serve-webpack.js:20:22)
at C:\Users\Kevin\Projects\AngularIo\material2-app\node_modules\angular-cli\commands\serve.js:102:26
at process._tickCallback (internal/process/next_tick.js:103:7)
J:\ng\material2-app-master>ng serve
Livereload server on http://localhost:49152
Serving on http://localhost:4200/
The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
J:/ng/material2-app-master/tmp/broccoli_type_script_compiler-input_base_path-cHBszQeb.tmp/0/src/typings.d.ts (1, 1): File 'J:/ng/material2-app-master/tmp/broccoli_type_script_compiler-input_base_path-cHBszQeb.tmp/0/typings/browser.d.ts' not found.
at BroccoliTypeScriptCompiler._doIncrementalBuild (J:\ng\material2-app-master\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:120:19)
at BroccoliTypeScriptCompiler.build (J:\ng\material2-app-master\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:43:10)
at J:\ng\material2-app-master\node_modules\angular-cli\node_modules\broccoli-caching-writer\index.js:152:21
at lib$rsvp$$internal$$tryCatch (J:\ng\material2-app-master\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (J:\ng\material2-app-master\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1048:17)
at lib$rsvp$$internal$$publish (J:\ng\material2-app-master\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1019:11)
at lib$rsvp$asap$$flush (J:\ng\material2-app-master\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1198:9)
at nextTickCallbackWith0Args (node.js:420:9)
at process._tickCallback (node.js:349:13)
The broccoli plugin was instantiated at:
at BroccoliTypeScriptCompiler.Plugin (J:\ng\material2-app-master\node_modules\angular-cli\node_modules\broccoli-plugin\index.js:10:31)
at BroccoliTypeScriptCompiler.CachingWriter as constructor
at BroccoliTypeScriptCompiler (J:\ng\material2-app-master\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:27:10)
at Angular2App._getTsTree (J:\ng\material2-app-master\node_modules\angular-cli\lib\broccoli\angular2-app.js:331:18)
at Angular2App._buildTree (J:\ng\material2-app-master\node_modules\angular-cli\lib\broccoli\angular2-app.js:124:23)
at new Angular2App (J:\ng\material2-app-master\node_modules\angular-cli\lib\broccoli\angular2-app.js:53:23)
at module.exports (J:\ng\material2-app-master\angular-cli-build.js:6:10)
at Class.module.exports.Task.extend.setupBroccoliBuilder (J:\ng\material2-app-master\node_modules\angular-cli\node_modules\angular-cli\lib\models\builder.js:55:19)
at Class.module.exports.Task.extend.init (J:\ng\material2-app-master\node_modules\angular-cli\node_modules\angular-cli\lib\models\builder.js:89:10)
at new Class (J:\ng\material2-app-master\node_modules\angular-cli\node_modules\core-object\core-object.js:18:12)
at Class.module.exports.Task.extend.run (J:\ng\material2-app-master\node_modules\angular-cli\node_modules\angular-cli\lib\tasks\serve.js:15:19)
at J:\ng\material2-app-master\node_modules\angular-cli\node_modules\angular-cli\lib\commands\serve.js:64:24
at lib$rsvp$$internal$$tryCatch (J:\ng\material2-app-master\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (J:\ng\material2-app-master\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1048:17)
at lib$rsvp$$internal$$publish (J:\ng\material2-app-master\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1019:11)
at lib$rsvp$asap$$flush (J:\ng\material2-app-master\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1198:9)
I am getting the following error when trying to do ng-serve.
The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
material2-app/tmp/broccoli_type_script_compiler-input_base_path-j7f4G37d.tmp/0/src/typings.d.ts (1, 1): File 'material2-app/tmp/broccoli_type_script_compiler-input_base_path-j7f4G37d.tmp/0/typings/browser.d.ts' not found.
at BroccoliTypeScriptCompiler._doIncrementalBuild (material2-app\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:12
0:19)
at BroccoliTypeScriptCompiler.build (material2-app\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:43:10)
at material2-app\node_modules\angular-cli\node_modules\broccoli-caching-writer\index.js:152:21
at lib$rsvp$$internal$$tryCatch (material2-app\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (material2-app\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1048:17)
at lib$rsvp$$internal$$publish (material2-app\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1019:11)
at lib$rsvp$asap$$flush (material2-app\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1198:9)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
What I did
npm installng-servenpm install
is failing with the following output
>npm install
npm WARN peerDependencies The peer dependency @angular/[email protected] included from @angular/compiler-cli will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency @angular/[email protected] included from @angular/compiler-cli will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency @angular/[email protected] included from @angular/compiler-cli will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN optional dep failed, continuing [email protected]
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v4.2.4
npm ERR! npm v2.14.12
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package @angular/[email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer @angular/[email protected] wants @angular/[email protected]
npm ERR! peerinvalid Peer @angular/[email protected] wants @angular/[email protected]
npm ERR! peerinvalid Peer @angular/[email protected] wants @angular/[email protected]
I was tinkering around with this project for learning purposes (Angular-cli, Angular2 and Material2)
When i duplicate the project and view it on an android-tablet, phone, or iPad, the loading time increases to 6+ seconds. On desktop it only takes 2 seconds. Even when i view the https://material2-app.firebaseapp.com/ link on those machines, loading seems to take quite a while.
Is this normal? Can we improve performance for production?
Getting the following error when building:
ERROR in ./src/main.ts Module not found: Error: Can't resolve './aot/app/app.module.ngfactory' in 'c:\Checkouts\material2-app\src' @ ./src/main.ts 8:0-76 @ multi main
PFA
Using below code
Unchecked Checked Indeterminate Disabled ng server made this error
"ENOENT: no such file or directory, stat 'C:\Angular2\material2-app\src\assets'"
my actions:
git clone -b master --single-branch https://github.com/jelbourn/material2-app.git
cd material2-app
npm install
npm start
The directory 'C:\Angular2\material2-app\src\assets'" doesn't exist.
when running
ngc -p ./src/tsconfig.ts
it shows an error that it couldnt find 'describe' and 'it' symbols of jasmine library, the spec files here were deleted how to fix this problem?
It will be great If we can use them both together
First of all thank You for building and sharing this demo app.
I'd like to ask for some modifications.
I'd like to see responsive layout, because right now app looks ugly on mobile phone.
Second thing is sidenav. Right now it is just a div, I really would like to see menu like in admin templates.
I'd like to contribute, but I'm just starting with angular 2 and still looking for good resources and best practices.
The command throws this error....
Cannot read property 'AssetUrl' of undefined
TypeError: Cannot read property 'AssetUrl' of undefined
at Object.<anonymous> (C:\DevonFactory\NjordWeb\material2-app-master\node_modules\@angular\compiler-cli\src\private_import_compiler.js:10:51)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
(...)
Hi.,
What about the module bundler stuffs ? What would you prefer ?
For what a saw, all itens inside the grid-tile are aligned on center, I try really hard to change the alignment but I count manage to change. The element that set the alignment is nested deep inside in the grid-list.
Is there a way to change this behavior? To set the alignment of the itens in the left or the right of grid-tile?
I love the sidebar, and I'd like to use the demo html markup for adding some content in the right way.
I think it's a very common feature for webapp to have or a fixed nabar on the top or, even better, a 'big' navbar' on the top that reduce itself to a fixed-on-top smaller version when user start to scroll down the page.
I added angular2-material components into my project before. and It worked. But after upgrading project into latest version of angular and typescript. They have problem in loading.
(SystemJS) XHR error (404 Not Found) loading http://localhost:3002/traceur
patchProperty/desc.set/wrapFn@http://localhost:3002/node_modules/zone.js/dist/zone.js:647:26
ZoneDelegate.prototype.invokeTask@http://localhost:3002/node_modules/zone.js/dist/zone.js:236:23
Zone.prototype.runTask@http://localhost:3002/node_modules/zone.js/dist/zone.js:136:28
ZoneTask/this.invoke@http://localhost:3002/node_modules/zone.js/dist/zone.js:304:28
Error loading http://localhost:3002/traceur
Unable to load transpiler to transpile http://localhost:3002/node_modules/@angular2-material/checkbox/checkbox.js
Error loading http://localhost:3002/node_modules/@angular2-material/checkbox/checkbox.js as "@angular2-material/checkbox" from http://localhost:3002/app/module.js
also after upgrading angular ,I had to move directives into declaration of @NgModule. So now My appModule is:
`
import { MdToolbar } from '@angular2-material/toolbar';
import {MdButtonToggleModule} from '@angular2-material/button-toggle/button-toggle';
import { MdButton, MdAnchor } from '@angular2-material/button';
import {MdButtonModule} from '@angular2-material/button';
import {MdCheckboxModule} from '@angular2-material/checkbox';
import {MdRadioModule} from '@angular2-material/radio';
import {MdSlideToggleModule} from '@angular2-material/slide-toggle/slide-toggle';
import {MdSidenavModule} from '@angular2-material/sidenav/sidenav';
import {MdListModule} from '@angular2-material/list/list';
import {MdGridListModule} from '@angular2-material/grid-list/grid-list';
import {MdCardModule} from '@angular2-material/card';
import {MdIconModule} from '@angular2-material/icon';
import {MdProgressCircleModule} from '@angular2-material/progress-circle/progress-circle';
import { MdCheckbox } from '@angular2-material/checkbox';`
import { MdUniqueSelectionDispatcher } from '@angular2-material/radio';
import { MdTab } from '@angular2-material/tabs';
import { MdList } from '@angular2-material/list';
import {MdInput} from '@angular2-material/input';
import { MdMenu } from '@angular2-material/menu';
//import { MD_TOOLBAR_DIRECTIVES } from '@angular2-material/toolbar/toolbar';
import {MdProgressBarModule} from '@angular2-material/progress-bar/progress-bar';
import {MdInputModule} from '@angular2-material/input/input';
import {MdTabsModule} from '@angular2-material/tabs/tabs';
import {MdToolbarModule} from '@angular2-material/toolbar';
import {MdTooltipModule} from '@angular2-material/tooltip';
import {MdRippleModule} from '@angular2-material/core/ripple/ripple';
import {PortalModule} from '@angular2-material/core/portal/portal-directives';
import {OverlayModule} from '@angular2-material/core/overlay/overlay-directives';
import {MdMenuModule} from '@angular2-material/menu/menu';
import {RtlModule} from '@angular2-material/core/rtl/dir';
const MATERIAL_MODULES = [
MdButtonModule,
MdButtonToggleModule,
MdCardModule,
MdCheckboxModule,
//Ng2SelectModule,
// Ng2SelectModule,
// MdDialogModule,
MdGridListModule,
MdIconModule,
MdInputModule,
//MdListModule,
MdMenuModule,
MdProgressBarModule,
//MdProgressCircleModule,
MdRadioModule,
MdRippleModule,
MdSidenavModule,
// MdSliderModule,
MdSlideToggleModule,
MdTabsModule,
MdToolbarModule,
MdTooltipModule,
OverlayModule,
PortalModule,
RtlModule
// SELECT_DIRECTIVES
];
@NgModule({
imports: [
MATERIAL_MODULES,
routing,
})
],
exports: [
MATERIAL_MODULES,
],
declarations: [
MdIcon,
MdButton,
MdInput,
MdTab,
MdList,
MdCheckbox,
MdMenu,
MdToolbar,
MdIcon,
MdDialog,
MdRadioModule,
],
and also I have it in systemjs.config:
var map = {.. '@angular2-material': '/node_modules/@angular2-material',..}//refer to .js
and package.json:
` "@angular2-material/button": "^2.0.0-alpha.8-experimental3",
"@angular2-material/button-toggle": "^2.0.0-alpha.8-experimental3",
"@angular2-material/card": "^2.0.0-alpha.8-experimental3",
"@angular2-material/checkbox": "^2.0.0-alpha.8-experimental3",
"@angular2-material/core": "^2.0.0-alpha.8-experimental3",
"@angular2-material/grid-list": "^2.0.0-alpha.8-experimental3",
"@angular2-material/icon": "^2.0.0-alpha.8-experimental3",
"@angular2-material/input": "^2.0.0-alpha.8-experimental3",
"@angular2-material/list": "^2.0.0-alpha.8-experimental3",
"@angular2-material/menu": "^2.0.0-alpha.8-experimental3",
"@angular2-material/progress-bar": "^2.0.0-alpha.8-experimental3",
"@angular2-material/progress-circle": "^2.0.0-alpha.8-experimental3",
"@angular2-material/radio": "^2.0.0-alpha.8-experimental3",
"@angular2-material/sidenav": "^2.0.0-alpha.8-experimental3",
"@angular2-material/slide-toggle": "^2.0.0-alpha.8-experimental3",
"@angular2-material/tabs": "^2.0.0-alpha.8-experimental3",
"@angular2-material/toolbar": "^2.0.0-alpha.8-experimental3",
"@angular2-material/tooltip": "^2.0.0-alpha.8-experimental3",
please help me ,what is the problem ? I confused `
I was looking for Angular Material working example(too good if with angular 4 and material2 beta3)
this example is not working at all
II tried npm install, npm install --only-dev and npm start
Is the problem something to do with the environment not being set?
I am trying to build the project with @angular/material package.
MaterialModule import, and MaterialModule.forRoot() is not working. Build is working fine but AppComponent is not getting loaded.
When i try importing individual components like MdButtonModule, MdIconModule. It is working fine.
But MdMenuModule is not working, if i include MdMenuModule in app.module.ts imports, and build. Then AppComponent is not getting loaded.
Hi,
Do you have a doc or guide to instruct about custom theme?
I have followed theme guide to create a custom theme. I also checkout the showcase material2-app and check the material2-app-theme.scss.
But it seems doesn't work well as on demo :
When click the toggle button, it switch and change all the color md-primary, md-accent, md-warn, background to the colors of dark theme :
.m2app-dark {
$dark-primary: md-palette($md-pink, 700, 500, 900);
$dark-accent: md-palette($md-blue-grey, A200, A100, A400);
$dark-warn: md-palette($md-deep-orange);
$dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);
@include angular-material-theme($dark-theme);
}
What you did to import this scss file in the app? I just see in guide, we need to build this scss file to css and linked in the app.component.html.
Can i import it from stylesURLs in the app.component.ts instead of link in the html?
I have did imported in the app.component.ts, it seems doesn't work well. It just change the background color or main page, but it doesn't change the color of components as checkbox, radio, button,...
Here is my theme:
@import '~@angular/material/core/theming/_all-theme';
// Include non-theme styles for core.
@include md-core();
.default-theme {
// Define a theme.
$primary: md-palette($md-cyan, 500);
$accent: md-palette($md-amber, A200, A100, A400);
$warn: md-palette($md-deep-orange);
// Create the theme object (a Sass map containing all of the palettes).
$default-theme: md-light-theme($primary, $accent, $warn);
}
And here is the screen:
Could show me how to change the all the color of components which has class md-primary, md-accent, md-warn,...?
Thanks,
Lam
Seems to be some trouble after last update
npm install
...
[email protected] /..../material2-app
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular2-material/[email protected]
....
├── UNMET PEER DEPENDENCY [email protected]
├─┬ [email protected]
...
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @angular2-material/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of typescript@>=1.7.3 but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/core@^2.0.0-rc.4 but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/platform-browser@^2.0.0-rc.4 but none was installed.
Sorry if this is off-topic for your repo, but you have the only sample app I can find that is based on the npm package.
In the angular/material2 source repo, the html and styles for each component are stored in separate files (via templateUrl and styleUrl properties), but in the npm package they are inlined (via template and style properties).
I got your sample app running (thank you for putting this together), and I can see in the node_modules/@angular2-material folder that the typescript file of each component still references the external html and css files, but the associated js files have the inlined html and css.
How is the conversion taking place?
Maybe it's just me, but a short list of which setup is used or how to set-up this 'simple app' could be helpful..?
At least from my end, i had some issues and couldn't get it working, lost some time and now i'm really unhappy :(
My Problem: I think it's probably a commonjs-thing, up until now i've been using systemjs. atm Getting 404 errors for all my components.
After run ng serve:
Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
Error: Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
After adding material elements to my projects, all my tests that test components that utilize material directives failed with "is not a known element" error. Adding an import for "MaterialModule" and adding "MaterialModule" to the test module's "imports" fixes the problem but not for all tests. The app.component.spec.ts fails even with these imports with a DI error looking for something called "Overlay".
Also this fix seems wrong since these are supposed to be unit tests. Shouldn't we have a way to mock it out? I can't seem to find info on mocking the directives defined by the material.
Examples of how to do this properly would be greatly appreciated.
Hi! From the same file, md-sidenav-layout appears to be deprecated, replaced by md-sidenav-container.
I have tried :
<md-card>
<button md-button>FLAT</button>
<button md-raised-button md-tooltip="This is a tooltip!">RAISED</button>
<button md-raised-button color="primary">PRIMARY RAISED</button>
<button md-raised-button color="accent">ACCENT RAISED</button>
</md-card>
<md-card>
<md-checkbox>Unchecked</md-checkbox>
<md-checkbox [checked]="true">Checked</md-checkbox>
<md-checkbox [indeterminate]="true">Indeterminate</md-checkbox>
<md-checkbox [disabled]="true">Disabled</md-checkbox>
</md-card>
<md-card>
<md-radio-button name="symbol">Alpha</md-radio-button>
<md-radio-button name="symbol">Beta</md-radio-button>
<md-radio-button name="symbol" disabled>Gamma</md-radio-button>
</md-card>
but it still show the input orginal style on chrome/Window 10:
Here is my css theme:
@import '~@angular/material/core/theming/all-theme';
@include md-core();
$candy-app-primary: md-palette($md-indigo);
$candy-app-accent: md-palette($md-pink, A200, A100, A400);
$candy-app-warn: md-palette($md-red);
$candy-app-theme: md-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme);
.m2app-dark {
$dark-primary: md-palette($md-pink, 700, 500, 900);
$dark-accent: md-palette($md-blue-grey, A200, A100, A400);
$dark-warn: md-palette($md-deep-orange);
$dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);
@include angular-material-theme($dark-theme);
}
What's wrong in my code?
My environment:
"@angular/material": "^2.0.0-beta.1",
angular cli: "version": "1.0.0-beta.24",
cd src/app
tsc
error TS6059: File 'C:/myfolder/material2-app/node_modules/@angular2-material/core/annotations/one-of.ts' is not under 'rootDir' '..'. 'rootDir' is expected to contain all source files.
error TS6059: File 'C:/myfolder/material2-app/node_modules/@angular2-material/core/rtl/dir.ts' is not under 'rootDir' '..'. 'rootDir' is expected to contain all source files.
error TS6059: File 'C:/myfolder/material2-app/node_modules/@angular2-material/radio/radio_dispatcher.ts' is not under 'rootDir' '..'. 'rootDir' is expected to contain all source files.
Any tips on how to compile the typescript files?
I downloaded this app yesterday and tried to build, but it kept having issues with angular cli. Kept saying that this app was generated using an older version of angular cli.. And it directed me to an upgrade page. You can recreate it by removing your existing installation of angular cli, npm cache clean, then reinstall latest version of angular cli, then try rebuilding. Can you please verify that it doesn't work with the latest (webpack) version of the cli? Thanks.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.