Ionic serve broken after upgrading to RC.1


#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

#2

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
})


#3

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


#4

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

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


#5

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.


#6

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


#7

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


#8

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


#9

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


#10
{
  "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


#11

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!


#12

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”
},


#13

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.


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

double src looks suspecious


#15

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


#16

"@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


#17

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


#18

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.


#19

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

#20

There is a thread open for this issue -