Build with aot error with css and js files not found

[thesunnypro]

Running ng serve works perfect. If I build the app for production it gives me error-

ERROR in ./~/angular2-dropzone-wrapper/dist/lib/dropzone.component.js
Module not found: Error: Can't resolve 'dropzone' in '/Users/sunnygupta/Sites/customer/node_modules/angular2-dropzone-wrapper/dist/lib'
 @ ./~/angular2-dropzone-wrapper/dist/lib/dropzone.component.js 2:15-34
 @ ./~/angular2-dropzone-wrapper/dist/lib/index.js
 @ ./~/angular2-dropzone-wrapper/dist/index.js
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/angular2-dropzone-wrapper/dist/lib/dropzone.directive.js
Module not found: Error: Can't resolve 'dropzone' in '/Users/sunnygupta/Sites/customer/node_modules/angular2-dropzone-wrapper/dist/lib'
 @ ./~/angular2-dropzone-wrapper/dist/lib/dropzone.directive.js 2:15-34
 @ ./~/angular2-dropzone-wrapper/dist/lib/index.js
 @ ./~/angular2-dropzone-wrapper/dist/index.js
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

Temporary solution I found was copying and pasting the dropzone folder from /node_modules to /node_modules/angular2-dropzone-wrapper/node_modules/

[sconix]

What build system / versions are you using? In our product we use the latest angular-cli and it builds without errors.

[thesunnypro]

angular-cli: 1.0.0-beta.22-1 node: 6.9.1 os: darwin x64

"dependencies": {
    "@angular/common": "~2.2.0",
    "@angular/compiler": "~2.2.0",
    "@angular/core": "~2.2.0",
    "@angular/forms": "~2.2.0",
    "@angular/http": "~2.2.0",
    "@angular/platform-browser": "~2.2.0",
    "@angular/platform-browser-dynamic": "~2.2.0",
    "@angular/router": "~3.2.0",
    "@types/node": "^6.0.52",
    "angular-cli": "^1.0.0-beta.22-1",
    "core-js": "^2.4.1",
    "gulp-clean-css": "^2.2.2",
    "karma-jasmine": "^1.1.0",
    "material-design-lite": "^1.2.1",
    "ng2-cookies": "^1.0.3",
    "ng2-page-scroll": "^4.0.0-beta.1",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  }

[sconix]

Only difference I see is that we have angular-cli 1.0.0-beta.24. Can you try with that?

Other thing that comes to mind is that what npm version you have? I can get that error if I remove dropzone from node_modules of our project. I am not npm expert so I don't even know why the dropzone gets installed into the projects node_modules since it is also installed under the angular2-dropzone-wrapper where it should be.

[thesunnypro]

I tried it with new "angular-cli": "1.0.0-beta.24" too.

I am using npm 3.10.8 even when deploying on amazon ami instance, I am getting same error.

Do I need to run some additional command in order to build the node_modules folder into the /node_modules/angular2-dropzone-wrapper/

[thesunnypro]

I went Inside /node_modules/angular2-dropzone-wrapper/ and ran command npm install to generate dropzone folder.

Now I am getting this error when I run ng build

ERROR in Error encountered resolving symbol values statically. Calling function 'OpaqueToken', 
function calls are not supported. Consider replacing the function or lambda with a reference to an
 exported function, resolving symbol DROPZONE_GUARD in /Users/sunnygupta/Sites/customer/node_modules/angular2-dropzone-
wrapper/dist/lib/dropzone.module.d.ts, resolving symbol DropzoneModule.forRoot in 
/Users/sunnygupta/Sites/customer/node_modules/angular2-dropzone-
wrapper/dist/lib/dropzone.module.d.ts, resolving symbol AppModule in 
/Users/sunnygupta/Sites/customer/src/app/app.module.ts, resolving symbol AppModule in 
/Users/sunnygupta/Sites/customer/src/app/app.module.ts

And this error when I run ng build --prod --aot

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in /Users/sunnygupta/Sites/customer/node_modules/angular2-dropzone-wrapper/node_modules/@angular/core/src/di/metadata.d.ts, resolving symbol OpaqueToken in /Users/sunnygupta/Sites/customer/node_modules/angular2-dropzone-wrapper/node_modules/@angular/core/src/di/opaque_token.d.ts, resolving symbol OpaqueToken in /Users/sunnygupta/Sites/customer/node_modules/angular2-dropzone-wrapper/node_modules/@angular/core/src/di/opaque_token.d.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/sunnygupta/Sites/customer/src'
 @ ./src/main.ts 4:0-74
 @ multi main

ERROR in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
Module not found: Error: Can't resolve '/Users/sunnygupta/Sites/customer/src/$$_gendir' in '/Users/sunnygupta/Sites/customer/node_modules/@angular/core/src/linker'
 @ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js 69:15-36 85:15-102
 @ ./~/@angular/core/src/linker.js
 @ ./~/@angular/core/src/core.js
 @ ./~/@angular/core/index.js
 @ ./src/main.ts
 @ multi main

[sconix]

You should not run npm install in the angular2-dropzone-wrapper folder, that will install also the devDependenciew and then you get those errors since angular core is installed twice.

What I meant was that could you check that does the dropzone get installed into your projects node_modules folder? Since for me it does even though I don't have it as dependency in my project so it gets installed due to angular2-dropzone-wrapper and I don't know why :) It might be because I am using npm 4.0.5, so maybe they have changed something. So if it happens that npm 3.x does not install the dropzone into the project folder as well then I have to study how to fix the problem for npm 3.x but if it does and we have the same setup then we are back to square one.

[thesunnypro]

Hi Sconix,

Yes dropzone do get installed in project root node_modules folder.

Can you make it to use the root dropzone folder and not the angular2-dropzone-wrapper node_modules folder?

Yes not running npm install in angular2-dropzone-wrapper does solves the errors of build though.

[thesunnypro]

Update: Running just ng build --prod works fine. aot flag is still giving errors of dropzone files missing.

Also checked using npm 4.0.5

[sconix]

Well it should be the angular-cli that defines the search paths for the modules so I really don't get then why your setup wont find dropzone and mine does. If I make a new project with angular-cli and make a really small app that uses this library both ng build and ng build --aot works. So really not sure why it does not work for you, but I will make new test later today or during the weekend. If you have time could you also make a quick test with newly created angular project?

Since not finding an installed module the fault really should be in the project configuration since the library can not effect to the search paths etc.

[thesunnypro]

I will make a new test app with angular-cli with dropzone included.

Here is my angular-cli.json file-

{
  "project": {
    "version": "1.0.0-beta.24",
    "name": "customer-angular"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [
        "assets/js/material.min.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

[thesunnypro]

Made a new app using angular-cli.

Here is the errors I get while installing angular-dropzone-wrapper-

~/Sites ❯❯❯ sudo npm install angular2-dropzone-wrapper --save-dev

npm WARN saveError ENOENT: no such file or directory, open '/Users/sunnygupta/Sites/package.json'
/Users/sunnygupta/Sites
├── UNMET PEER DEPENDENCY @angular/common@^2.0.0
├── UNMET PEER DEPENDENCY @angular/compiler@^2.0.0
├── UNMET PEER DEPENDENCY @angular/core@^2.0.0
├── UNMET PEER DEPENDENCY @angular/http@^2.0.0
├── UNMET PEER DEPENDENCY @angular/platform-browser@^2.0.0
├─┬ angular2-dropzone-wrapper@2.0.1
│ └── dropzone@4.3.0
├── UNMET PEER DEPENDENCY core-js@^2.4.0
├── UNMET PEER DEPENDENCY rxjs@^5.0.0
└── UNMET PEER DEPENDENCY zone.js@^0.7.0

npm WARN enoent ENOENT: no such file or directory, open '/Users/sunnygupta/Sites/package.json'
npm WARN angular2-dropzone-wrapper@2.0.1 requires a peer of @angular/common@^2.0.0 but none was installed.
npm WARN angular2-dropzone-wrapper@2.0.1 requires a peer of @angular/compiler@^2.0.0 but none was installed.
npm WARN angular2-dropzone-wrapper@2.0.1 requires a peer of @angular/core@^2.0.0 but none was installed.
npm WARN angular2-dropzone-wrapper@2.0.1 requires a peer of @angular/http@^2.0.0 but none was installed.
npm WARN angular2-dropzone-wrapper@2.0.1 requires a peer of @angular/platform-browser@^2.0.0 but none was installed.
npm WARN angular2-dropzone-wrapper@2.0.1 requires a peer of core-js@^2.4.0 but none was installed.
npm WARN angular2-dropzone-wrapper@2.0.1 requires a peer of rxjs@^5.0.0 but none was installed.
npm WARN angular2-dropzone-wrapper@2.0.1 requires a peer of zone.js@^0.7.0 but none was installed.
npm WARN Sites No description
npm WARN Sites No repository field.
npm WARN Sites No README data
npm WARN Sites No license field.

Indeed its a problem with the module itself. sconix you should try creating the app on some other machine maybe.

I am using macOS latest stable release.

Try on amazon aws maybe.

[sconix]

I will do some tests tomorrow. Nobody in my team had any problems but we are all runnin pretty same OS setup. Anyway I try to do some tests tomorrow, but those errors does not make a lot sense. Since there should not be any other changes to the packaging itself than introducing peer dependencies.

[sconix]

I tested in both Linux and Mac environment and in both I get successful build and the dropzone library works with new project created with the latest angular-cli. The only issue is that when using --aot the dropzone css file can not be found and I will fix this today in 2.0.2 release.

So I am unable to reproduce the exact problems you have. Since your original post is about the compiler not finding the dropzone module which you said that is in your projects node_modules so there should not be no reason why it does not find it. The library really can not effect on how the application does the module recovery, it only tells that import dropzone and then the compiler should search for it from the node_modules.

[thesunnypro]

Hi Sconix,

Yea the issue is just with aot flag now. I'll test the new update now with 2.0.2

[thesunnypro]

Seems to fixed now.

Thanks sconix!