Ionic serve broken after upgrading to RC.1

@mhartington

What I did for the upgrade (from RC.0)

  • update package.json
  • rm -rf node_modules
  • npm i
  • sudo npm i -g ionic

here is the ionic serve output

template error, "/Users/bob/Desktop/myapp/src/app/pages/test/build/pages/test/test.html":

            Error: ENOENT: no such file or directory, open '/Users/bob/Desktop/myapp/src/app/pages/test/build/pages/test/test.html'

[11:30:17]  template error, "/Users/bob/Desktop/myapp/src/src/components/spinner/spinner.html":

            Error: ENOENT: no such file or directory, open '/Users/bob/Desktop/myapp/src/src/components/spinner/spinner.html'

[11:30:17]  template error, "/Users/bob/Desktop/myapp/src/src/components/header/header.html":
            Error: ENOENT: no such file or directory, open '/Users/bob/Desktop/myapp/src/src/components/header/header.html'

[11:30:17]  template error, "/Users/bob/Desktop/myapp/src/src/components/player/player.html":
            Error: ENOENT: no such file or directory, open '/Users/bob/Desktop/myapp/src/src/components/player/player.html'

[11:30:17]  template error, "/Users/bob/Desktop/myapp/src/src/components/tracks/tracks.html":

            Error: ENOENT: no such file or directory, open '/Users/bob/Desktop/myapp/src/src/components/tracks/tracks.html'

[11:30:17]  template error, "/Users/bob/Desktop/myapp/src/src/pages/detail/detail.html": Error:
            ENOENT: no such file or directory, open '/Users/bob/Desktop/myapp/src/src/pages/detail/detail.html'

[11:30:17]  template error, "/Users/bob/Desktop/myapp/src/src/pages/search/search.html": Error:

            ENOENT: no such file or directory, open '/Users/bob/Desktop/myapp/src/src/pages/search/search.html'

[11:30:17]  template error, "/Users/bob/Desktop/myapp/src/src/pages/landing/landing.html": Error:

            ENOENT: no such file or directory, open '/Users/bob/Desktop/myapp/src/src/pages/landing/landing.html'

[11:30:17]  template error, "/Users/bob/Desktop/myapp/src/src/pages/privacypolicy/privacypolicy.html":

            Error: ENOENT: no such file or directory, open '/Users/bob/Desktop/myapp/src/src/pages/privacypolicy/privacypolicy.html'

[11:30:17]  template error, "/Users/bob/Desktop/myapp/src/src/pages/register/register.html": Error:
            ENOENT: no such file or directory, open '/Users/bob/Desktop/myapp/src/src/pages/register/register.html'

[11:30:17]  template error, "/Users/bob/Desktop/myapp/src/src/pages/about/about.html": Error:

            ENOENT: no such file or directory, open '/Users/bob/Desktop/myapp/src/src/pages/about/about.html'

[11:30:17]  template error, "/Users/bob/Desktop/myapp/src/src/app/app.template.html": Error: ENOENT:

            no such file or directory, open '/Users/bob/Desktop/myapp/src/src/app/app.template.html'

[11:30:17]  template error, "/Users/bob/Desktop/myapp/src/src/components/featuredlist/featuredlist.html":
            Error: ENOENT: no such file or directory, open '/Users/bob/Desktop/myapp/src/src/components/featuredlist/featuredlist.html'

[11:30:17]  template error, "/Users/bob/Desktop/myapp/src/src/components/metadata/metadata.html":

            Error: ENOENT: no such file or directory, open '/Users/bob/Desktop/myapp/src/src/components/metadata/metadata.html'

[11:30:17]  template error, "/Users/bob/Desktop/myapp/src/src/components/relateditems/relateditems.html":

            Error: ENOENT: no such file or directory, open '/Users/bob/Desktop/myapp/src/src/components/relateditems/relateditems.html'

[11:30:17]  typescript: node_modules/ionic-angular/components/checkbox/checkbox.d.ts, line: 8

            Cannot find name 'ControlValueAccessor'.
       L7:  export declare const CHECKBOX_VALUE_ACCESSOR: any;
       L8:  lass Checkbox extends Ion implements AfterContentInit, ControlValueAccessor, OnDestroy {
       L9:      private _form;
            Cannot find name 'ControlValueAccessor'.
       L9:  export declare const DATETIME_VALUE_ACCESSOR: any;
[11:30:17]  typescript: node_modules/ionic-angular/components/datetime/datetime.d.ts, line: 10

      L10:  lass DateTime extends Ion implements AfterContentInit, ControlValueAccessor, OnDestroy {
      L11:      private _form;
            Cannot find name 'NgControl'.
      L34:  _native: NativeInput;
[11:30:17]  typescript: node_modules/ionic-angular/components/input/input-base.d.ts, line: 35

      L35:  inputControl: NgControl;
      L36:  constructor(config: Config, _form: Form, _item: Item, _app: App, _platform: Platfor
[11:30:17]  typescript: node_modules/ionic-angular/components/input/input-base.d.ts, line: 36

            Cannot find name 'NgControl'.
      L35:      inputControl: NgControl;
      L36:  ef, renderer: Renderer, _scrollView: Content, nav: NavController, ngControl: NgControl);
      L37:      scrollMove(ev: UIEvent): void;
            Cannot find name 'NgControl'.
[11:30:17]  typescript: node_modules/ionic-angular/components/input/input-base.d.ts, line: 39

      L38:  setItemInputControlCss(): void;
      L39:  setControlCss(element: any, control: NgControl): void;
      L40:  setValue(val: any): void;
            Cannot find name 'NgControl'.
[11:30:17]  typescript: node_modules/ionic-angular/components/input/input.d.ts, line: 13

      L12:  export declare class TextInput extends InputBase {
      L13:  Ref, renderer: Renderer, scrollView: Content, nav: NavController, ngControl: NgControl);
      L14:      _clearInput: boolean;
[11:30:17]  typescript: node_modules/ionic-angular/components/input/input.d.ts, line: 33

            Cannot find name 'NgControl'.
      L32:  export declare class TextArea extends InputBase {
      L33:  Ref, renderer: Renderer, scrollView: Content, nav: NavController, ngControl: NgControl);
      L34:      placeholder: string;
[11:30:17]  typescript: node_modules/ionic-angular/components/input/native-input.d.ts, line: 7

            Cannot find name 'NgControl'.
       L6:  _renderer: Renderer;
       L7:  ngControl: NgControl;
       L8:  _relocated: boolean;
[11:30:17]  typescript: node_modules/ionic-angular/components/input/native-input.d.ts, line: 14

            Cannot find name 'NgControl'.
      L13:      valueChange: EventEmitter<string>;
      L14:  tor(_elementRef: ElementRef, _renderer: Renderer, config: Config, ngControl: NgControl);
      L15:      _change(ev: any): void;
            Cannot find name 'DomSanitizer'.
[11:30:17]  typescript: node_modules/ionic-angular/components/picker/picker-component.d.ts, line: 31

      L30:      ionChange: EventEmitter<any>;
      L31:  ctor(config: Config, elementRef: ElementRef, _sanitizer: DomSanitizer, _haptic: Haptic);
      L32:      ngAfterViewInit(): void;
[11:30:17]  typescript: node_modules/ionic-angular/components/range/range.d.ts, line: 25

            Cannot find name 'ControlValueAccessor'.
      L25:  lare class Range extends Ion implements AfterViewInit, ControlValueAccessor, OnDestroy {
      L26:      private _form;
[11:30:17]  typescript: node_modules/ionic-angular/components/searchbar/searchbar.d.ts, line: 33

            Cannot find name 'NgControl'.
      L32:      _sbHasFocus: boolean;
      L33:  uctor(config: Config, elementRef: ElementRef, renderer: Renderer, ngControl: NgControl);
      L34:      _searchbarInput: ElementRef;
            Cannot find name 'NgControl'.
[11:30:17]  typescript: node_modules/ionic-angular/components/segment/segment.d.ts, line: 25

      L24:      _buttons: QueryList<SegmentButton>;
      L25:  uctor(config: Config, elementRef: ElementRef, renderer: Renderer, ngControl: NgControl);
      L26:      disabled: boolean;
            Cannot find name 'ControlValueAccessor'.
[11:30:17]  typescript: node_modules/ionic-angular/components/select/select.d.ts, line: 11

      L10:  export declare const SELECT_VALUE_ACCESSOR: any;
      L11:   class Select extends Ion implements AfterContentInit, ControlValueAccessor, OnDestroy {
      L12:      private _app;
[11:30:17]  typescript: node_modules/ionic-angular/components/toggle/toggle.d.ts, line: 10

            Cannot find name 'ControlValueAccessor'.
       L9:  export declare const TOGGLE_VALUE_ACCESSOR: any;
      L10:   class Toggle extends Ion implements AfterContentInit, ControlValueAccessor, OnDestroy {
      L11:      _form: Form;
            Cannot find name 'PlatformLocation'.
[11:30:17]  typescript: node_modules/ionic-angular/module.d.ts, line: 17
[11:30:17]  typescript: node_modules/ionic-angular/module.d.ts, line: 17

      L17:  n provideLocationStrategy(platformLocationStrategy: PlatformLocation, baseHref: string,
      L18:  export declare function provideUserAgent(): string;
            Cannot find name 'HashLocationStrategy'.
      L17:   PlatformLocation, baseHref: string, config: Config): HashLocationStrategy | PathLocatio
      L18:  export declare function provideUserAgent(): string;
            Cannot find name 'PathLocationStrategy'.
      L17:  ocation, baseHref: string, config: Config): HashLocationStrategy | PathLocationStrategy;
      L18:  export declare function provideUserAgent(): string;
            All declarations of 'size' must have identical modifiers.
            All declarations of 'prototype' must have identical modifiers.
      L30:  declare var WeakMap: WeakMapConstructor;
[11:30:17]  typescript: node_modules/ionic-angular/module.d.ts, line: 17
[11:30:17]  typescript: node_modules/typescript/lib/lib.es2015.collection.d.ts, line: 24
[11:30:17]  typescript: node_modules/typescript/lib/lib.es2015.collection.d.ts, line: 30
[11:30:17]  typescript: node_modules/typescript/lib/lib.es2015.collection.d.ts, line: 44
[11:30:17]  typescript: node_modules/typescript/lib/lib.es2015.collection.d.ts, line: 54

            All declarations of 'prototype' must have identical modifiers.
      L43:  new <T>(values?: T[]): Set<T>;
      L44:  readonly prototype: Set<any>;
            All declarations of 'size' must have identical modifiers.
      L54:  interface WeakSetConstructor {
      L55:      new (): WeakSet<any>;
            All declarations of 'prototype' must have identical modifiers.
            All declarations of 'prototype' must have identical modifiers.
[11:30:17]  typescript: node_modules/typescript/lib/lib.es2015.collection.d.ts, line: 60
[11:30:17]  typescript: node_modules/typescript/lib/lib.es2015.collection.d.ts, line: 73
[11:30:17]  typescript: node_modules/typescript/lib/lib.es2015.core.d.ts, line: 17

            Duplicate identifier 'PropertyKey'.
      L16:  * Returns the index of the first element in the array where predicate is true, an
      L17:  * otherwise.
      L18:  * @param predicate find calls predicate once for each element of the array, in as
            All declarations of 'EPSILON' must have identical modifiers.
[11:30:17]  typescript: node_modules/typescript/lib/lib.es2015.core.d.ts, line: 216
[11:30:17]  typescript: node_modules/typescript/lib/lib.es2015.core.d.ts, line: 251
[11:30:17]  typescript: node_modules/typescript/lib/lib.es2015.core.d.ts, line: 258

     L216:  /**
     L217:    * Returns a Boolean value that indicates whether a value is the reserved value Na
            All declarations of 'MAX_SAFE_INTEGER' must have identical modifiers.
     L251:  * Converts A string to an integer.
     L252:  * @param s A string to convert into a number.
            All declarations of 'MIN_SAFE_INTEGER' must have identical modifiers.
     L257:      parseInt(string: string, radix?: number): number;
     L258:  }
[11:30:17]  typescript: node_modules/typescript/lib/lib.es2015.core.d.ts, line: 403

            All declarations of 'flags' must have identical modifiers.
     L402:  interface RegExpConstructor {
     L403:      new (pattern: RegExp, flags?: string): RegExp;
     L404:      (pattern: RegExp, flags?: string): RegExp;
            All declarations of 'value' must have identical modifiers.
[11:30:17]  typescript: node_modules/typescript/lib/lib.es2015.iterable.d.ts, line: 29

      L28:  interface Array<T> {
      L29:      /** Iterator */
      L30:      [Symbol.iterator](): IterableIterator<T>;
            All declarations of 'prototype' must have identical modifiers.
[11:30:17]  typescript: node_modules/typescript/lib/lib.es2015.promise.d.ts, line: 69

      L69:  * Creates a Promise that is resolved with an array of results when all of the provi
      L70:  * resolve, or rejected when any Promise is rejected.
            Cannot find name 'Http'.
[11:30:17]  typescript: src/services/auth/base.ts, line: 12
[11:30:17]  typescript: src/services/auth/service.ts, line: 19

      L12:  protected http: Http;
      L13:  protected cache: CacheService;
            Cannot find name 'Http'.
      L18:  constructor(
      L19:    protected http: Http,
      L20:    protected cache: CacheService,
            Cannot find name 'Http'.
      L12:  constructor(
      L13:    protected http: Http,
      L14:    protected httpAuthService: HttpAuthService,
[11:30:17]  typescript: src/services/featured.service.ts, line: 13
[11:30:17]  typescript: src/services/httpauth.service.ts, line: 13

            Cannot find name 'Http'.
      L12:  constructor(
      L13:    private http: Http,
      L14:    private authService: AuthService
            Cannot find name 'RequestOptions'.
[11:30:17]  typescript: src/services/httpauth.service.ts, line: 20

      L19:    endPoint: string,
      L20:    options?: RequestOptions
      L21:  ): any {
[11:30:17]  typescript: src/services/search.service.ts, line: 16
[11:30:17]  typescript: src/services/search.service.ts, line: 17

            Cannot find name 'URLSearchParams'.
      L15:  search(query: Query): any {
      L16:    const search: URLSearchParams = new URLSearchParams();
      L17:    const options: RequestOptions = new RequestOptions();
            Cannot find name 'RequestOptions'.
      L16:  const search: URLSearchParams = new URLSearchParams();
      L17:  const options: RequestOptions = new RequestOptions();
            Cannot find name 'Http'.
      L58:  constructor(private http: Http) {
            Duplicate identifier 'PropertyKey'.
       L8:  interface IterableShim<T> {
            All declarations of 'value' must have identical modifiers.
      L12:  "_es6-shim iterator_"(): Iterator<T>;
            All declarations of 'EPSILON' must have identical modifiers.
     L249:    * @param number A numeric value.
     L250:    */
     L251:  isFinite(number: number): boolean;
            All declarations of 'MAX_SAFE_INTEGER' must have identical modifiers.
     L285:  MIN_SAFE_INTEGER: number;
            All declarations of 'MIN_SAFE_INTEGER' must have identical modifiers.
            All declarations of 'flags' must have identical modifiers.
     L347:    * @param x A numeric expression.
     L348:    */
     L349:  clz32(x: number): number;
            All declarations of 'prototype' must have identical modifiers.
     L499:   * and a reject callback used to reject the promise with a provided reason or error.
     L500:   */
     L501:  new <T>(executor: (resolve: (value?: T | PromiseLike<T>) => void, reject: (reason?:
            All declarations of 'size' must have identical modifiers.
     L562:  interface MapConstructor {
     L563:      new <K, V>(): Map<K, V>;
     L564:      new <K, V>(iterable: IterableShim<[K, V]>): Map<K, V>;
            All declarations of 'prototype' must have identical modifiers.
     L571:  add(value: T): Set<T>;
     L572:  clear(): void;
     L573:  delete(value: T): boolean;
            All declarations of 'size' must have identical modifiers.
     L582:  interface SetConstructor {
     L583:      new <T>(): Set<T>;
     L584:      new <T>(iterable: IterableShim<T>): Set<T>;
            All declarations of 'prototype' must have identical modifiers.
     L591:  delete(key: K): boolean;
     L592:  get(key: K): V;
     L593:  has(key: K): boolean;
            All declarations of 'prototype' must have identical modifiers.
[11:30:17]  typescript: src/services/siq.service.ts, line: 58
[11:30:17]  typescript: typings/browser/ambient/es6-shim/index.d.ts, line: 8
[11:30:17]  typescript: typings/browser/ambient/es6-shim/index.d.ts, line: 12
[11:30:17]  typescript: typings/browser/ambient/es6-shim/index.d.ts, line: 250
[11:30:17]  typescript: typings/browser/ambient/es6-shim/index.d.ts, line: 285
[11:30:17]  typescript: typings/browser/ambient/es6-shim/index.d.ts, line: 292
[11:30:17]  typescript: typings/browser/ambient/es6-shim/index.d.ts, line: 348
[11:30:17]  typescript: typings/browser/ambient/es6-shim/index.d.ts, line: 500
[11:30:17]  typescript: typings/browser/ambient/es6-shim/index.d.ts, line: 563
[11:30:17]  typescript: typings/browser/ambient/es6-shim/index.d.ts, line: 572
[11:30:17]  typescript: typings/browser/ambient/es6-shim/index.d.ts, line: 583
[11:30:17]  typescript: typings/browser/ambient/es6-shim/index.d.ts, line: 592
[11:30:17]  typescript: typings/browser/ambient/es6-shim/index.d.ts, line: 607
[11:30:17]  typescript: typings/browser/ambient/es6-shim/index.d.ts, line: 621

In your ts file remove the path for the template html file

e.g

@Component({
templateUrl: ‘oil-entry-edit-main.html’ <- Note n0 path specified for the html
})

All my .html files are having the correct templateUrl - without paths. That’s not the cause.

Have you followed the other changes mentioned in the RC0 change log.

Now the Pages folder needs to be inside the src folder.

Like I said, I’ve already upgraded to RC.0 and it has been working for a few days. The question is about upgrading to RC.1.

Looks like the node-module is missing libraries.

delete node_module file and run
npm install
then try to serve the app if you still get errors

deleted node_modules and npm i a few times … no dice.

I had issues with dependencies when I upgraded to RC1 this morning

try these steps

do a
npm cache clear
npm install -g ionic

run npm install in your app folder

hope this helps

Please post your package.json

npm install -g ionic will only update your CLI installation.

if you need to update the framework, update the ionic-angular entry in the package.json

{
  "ionic-native": "^2.0.3",
  "dependencies": {
    "@angular/common": "^2.0.0",
    "@angular/compiler": "^2.0.0",
    "@angular/compiler-cli": "^0.6.2",
    "@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/platform-server": "^2.0.0",
    "ionic-angular": "^2.0.0-rc.1",
    "ionicons" : "^3.0.0",
    "@ionic/storage": "^1.0.3",
    "ionic-native": "^2.0.3",
    "rxjs": "^5.0.0-beta.12",
    "zone.js": "^0.6.21"
  },
  "devDependencies": {
    "tslint": "^3.10.2",
    "@ionic/app-scripts": "^0.0.31",
    "typescript": "^2.0.3"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-statusbar",
    "cordova-plugin-console",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard",
    "cordova-plugin-device-orientation",
    "cordova-plugin-fullscreen",
    "cordova-plugin-inappbrowser",
    "cordova-sqlite-storage"
  ],
  "cordovaPlatforms": [
    {
      "platform": "android",
      "version": "5.0.0",
      "locator": "android@5.0.0"
    },
    {
      "platform": "browser",
      "version": "",
      "locator": "browser"
    },
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  ....
  "scripts": {
    "build": "ionic-app-scripts build",
    "watch": "ionic-app-scripts watch",
    "serve:before": "watch",
    "emulate:before": "build",
    "deploy:before": "build",
    "build:before": "build",
    "run:before": "build"
  }
}

according to https://github.com/driftyco/ionic/blob/master/CHANGELOG.md

Does the npm install give you any errors?

Try doing this:

  1. Remove node_modules
  2. Take out all the ‘^’ in your package.json to work with strict version only e.g.

“rxjs”: “^5.0.0-beta.12” → “rxjs”: “5.0.0-beta.12”

  1. Do a npm install and post us the errors/warnings you’re getting.

Good luck!

here’s my package.json for your reference - (note I am using latest app-scripts 0.0.33)

“dependencies”: {
"@angular/common": “^2.0.0”,
"@angular/compiler": “^2.0.0”,
"@angular/compiler-cli": “^0.6.2”,
"@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/platform-server": “^2.0.0”,
“ionic-angular”: “^2.0.0-rc.1”,
“ionicons”: “^3.0.0”,
"@ionic/storage": “^1.0.3”,
“ionic-native”: “^2.0.3”,
“rxjs”: “^5.0.0-beta.12”,
“zone.js”: “^0.6.21”
},
“devDependencies”: {
"@ionic/app-scripts": “0.0.33”,
“typescript”: “^2.0.3”
},

package.json

{
  "ionic-native": "^2.0.3",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/compiler-cli": "0.6.2",
    "@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/platform-server": "2.0.0",
    "ionic-angular": "2.0.0-rc.1",
    "ionicons" : "3.0.0",
    "@ionic/storage": "1.0.3",
    "ionic-native": "2.0.3",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.21"
  },
  "devDependencies": {
    "tslint": "3.10.2",
    "@ionic/app-scripts": "0.0.31",
    "typescript": "2.0.3"
  },

npm i had no warnings or errors.

but when I ran ionic serve I still get the same errors originally posted.

        '/Users/bob/Desktop/photon-ui/src/src/components/header/header.html'

double src looks suspecious

Upgrade your app-scripts to 0.0.33

The src problem is related to this issue: https://github.com/driftyco/ionic-app-scripts/issues/160

"@ionic/app-scripts": "0.0.33",
rm -rf node_modules
npm i

ionic serve

same error as originally posted .

node 6.7.0
npm 3.10.3
typescript 2.0.3
ionic-cli 2.1.0

I also did ionic state reset, but that doesn’t seem to do anything at all.

The porblem is even if I restored package.json before the upgrade, rm node_modules and npm i, ionic serve still gives me the same error originally posted.

Everyone was having the same errors as you in the github issue. There seems to be two way to fix it:

  1. fix(transpile): use rootDir as destination
  2. Dan’s solution

There is a thread open for this issue -