Angular-cli: ng build -prod 404 on imported items in main.ts

Created on 15 Jul 2016  路  4Comments  路  Source: angular/angular-cli

Please provide us with the following information:

  1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
    Windows 10
  2. Versions. Please run ng --version. If there's nothing outputted, please
    run in a Terminal:
    node --version
    And paste the result here.
    node: 5.1.0
    angular-cli: 0.0.39
    angular: 2.0.0-rc.4
    systemjs: 0.19.26
    zone.js: 0.6.12
    os: win32 x64
  3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
    do on your code? etc.
    Create a new angular project with
    > ng new _projectname_
    Add a new TypeScript file in /src/app/
    For example my-service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class MyService { }

import the service in main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { MyProjectAppComponent, environment } from './app/';
import { MyService } from './app/my-service';

var service = new MyService();

if (environment.production) {
  enableProdMode();
}

bootstrap(MyProjectAppComponent);

ng serve runs fine and the app works, ng serve -prod runs fine too but the app doesn't work. I get a 404 on my-service.ts

  1. The log given by the failure. Normally this include a stack trace and some
    more information.
    image
  2. Mention any other details that might be useful.
    I made a stackoverflow question about this too but not a lot of views:
    http://stackoverflow.com/questions/38353014/ng-build-prod-404-on-imported-items-in-main-ts

Thanks! We'll be in touch soon.

All 4 comments

I am getting the same error, seems to happen that all the js files get pushed into one main.js file and so the import statements for anything that isn't pointing to an import from the vendor folder in the main.ts file become useless?

I also have the same problem, ng serve works, but not with the --prod flag.

my main.ts

bootstrap(App, [
  APP_ROUTER_PROVIDERS,
  HTTP_PROVIDERS,
  provide(ExceptionHandler, { useClass: CustomExceptionHandler }),
  provide(LocationStrategy, { useClass: HashLocationStrategy }),
  {
    provide: TranslateLoader,
    useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
    deps: [Http]
  },
  Angulartics2,
  TranslateService,
  MessagesService,
  UserService
])
.then(() => {
  console.log('Angular 2 loaded');
})
.catch(err => console.error(err));

In my browser it tries to load:

app/_services/messages.service.js
app/_services/user.service.js
app/app.routes.js
etc...

All these files get 404 erros (because they don't exist, they have been compiled into main.js)

Closed as this issue was made obsolete by #1455.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings