0

Just started experiencing this error after moving from angular2 Rc.5 to Final. I don't know what might be causing it, but i think its from the angular2-mdl package. Would be happy if someone can help me out.

Here is the complete error message:

Uncaught Error: Unexpected value 'MdlModule' imported by the module 'AppModule'

Here are my packages:

"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/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",
"@angular2-mdl-ext/popover": "0.0.3",
"@angular2-mdl-ext/select": "0.0.2",
"angular2-jwt": "^0.1.23",
"angular2-mdl": "1.7.1",
"core-js": "^2.4.1",
"es6-shim": "^0.35.0",
"es7-reflect-metadata": "^1.6.0",
"jwt-decode": "^2.0.1",
"material-design-icons": "^3.0.1",
"material-design-lite": "^1.2.1",
"rxjs": "^5.0.0-beta.12",
"zone.js": "^0.6.23"
   },

"devDependencies": {
"@angularclass/hmr": "^1.0.1",
"@angularclass/hmr-loader": "^1.0.0",
"angular2-template-loader": "^0.4.0",
"css-loader": "^0.23.1",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"extract-text-webpack-plugin": "^1.0.1",
"favicons-webpack-plugin": "0.0.7",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.15.0",
"imports-loader": "^0.6.5",
"jasmine-core": "^2.4.1",
"json-loader": "^0.5.4",
"karma": "^0.13.22",
"karma-jasmine": "^0.3.8",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.7.0",
"null-loader": "^0.1.1",
"phantomjs-prebuilt": "^2.1.7",
"raw-loader": "^0.5.1",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.1",
"ts-loader": "^0.8.1",
"tslint": "^3.5.0",
"tslint-loader": "^2.1.3",
"typedoc": "^0.4.4",
"typescript": "^2.0.2",
"typings": "^1.0.4",
"webpack": "^1.13.2",
"webpack-dashboard": "^0.1.8",
"webpack-dev-server": "^1.15.1",
"webpack-merge": "^0.14.1",
"webpack-node-externals": "^1.4.3"
  }

My build and dev system is: "webpack": "1.13.2"

David Oti
  • 51
  • 6
  • not easy to help you without knowledge of your complete configuration. are there any errors after npm install? what packages do you really use in your vendor.ts file? in which order did you import the polyfills. you depend on core-js and es7-reflect-metadata booth provide decorators. usually this error tells you that the MdlModule has no metadata. this is possible if you are using more then one polyfill for decorators... – michael Sep 20 '16 at 17:04
  • No errors after npm install. Here are the packages in my vendor.ts `import '@angular/platform-browser'; import '@angular/platform-browser-dynamic'; import '@angular/core'; import '@angular/common'; import '@angular/http'; import '@angular/router'; import 'angular2-mdl'; import '@angular2-mdl-ext/select'; import 'material-design-lite/material.min.css'; import 'material-design-icons/iconfont/material-icons.css'; import 'angular2-mdl/src/scss-mdl/_color-definitions.scss'; import 'angular2-mdl/src/scss-mdl/material-design-lite.scss'; import 'rxjs';` – David Oti Sep 20 '16 at 17:51
  • Here is the order in which my polyfills are imported `import 'core-js/es6'; import 'core-js/es7/reflect'; require('zone.js/dist/zone'); if (process.env.ENV === 'production') { // Production } else { // Development Error['stackTraceLimit'] = Infinity; require('zone.js/dist/long-stack-trace-zone'); }` – David Oti Sep 20 '16 at 18:00
  • a lot of imports regarding the css. but they should not affect the angular modules. are you using angular-cli? which version? – michael Sep 20 '16 at 18:29
  • Am not using angular cli. i'm making use of Webpack – David Oti Sep 20 '16 at 18:43
  • ok. this project https://github.com/mseemann/angular2-mdl-ext is using webpack too without angular-cli. may be you find a difference with your configuration. i didn't see any. it is webpack 2 but this should not be a problem. it has worked also with webpack 1 like a charm. there are some dependencies that are really no longer required (like es6 or reflect meta) and the packages @angular2-mdl-ext/select and @angular2-mdl-ext/popover are not released right now:) – michael Sep 20 '16 at 18:49
  • Ok. let me take a quick look at it now. – David Oti Sep 20 '16 at 19:03
  • 1
    After upgrading webpack to v2 along side its dependencies and including awesome-typescript-loader to handle my ts files, the error disappeared and everything seems to be normal now. Thanks Michael, u saved me a great deal of stress. – David Oti Sep 20 '16 at 21:49

1 Answers1

1

After upgrading webpack to v2 along side its dependencies and including awesome-typescript-loader to handle my ts files in webpack.config, the error disappeared and everything seems to be normal now.

Upgrade webpack to v2

"extract-text-webpack-plugin": "^2.0.0-beta.4",
"webpack": "^2.1.0-beta.22",
"webpack-dev-server": "^2.1.0-beta.4",

Include awesome-typescript-loader to handle ts files

  loaders: [
     {
      test: /\.ts$/,
      loaders: ['awesome-typescript-loader', 'angular2-template-loader']
     },
  ...
  ]
David Oti
  • 51
  • 6