Angular build cannot find module with relative path (on azure dev ops)

Question

I have a problem getting a mid-sized Angular 7 project to build on Azure Dev Ops Pipelines. So I created a minimal project to recreate the issue.

Using Angular CLI (7.2.4) I created a new project

ng new minimal-app

It builds locally and on Azure just fine. I edited app.component.ts to use my UserModel, lines 2, 11 & 14

import {Component} from '@angular/core';
import {UserModel} from '../Models/User.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'minimal-app';
  user = new UserModel();

  constructor() {
    this.user.name = 'Jo';
  }

}

the User.model.ts file contains

export class UserModel {
  id: number;
  name: string;
}

This also compiles on local and Azure just fine. The issue comes when trying to add a nested model, see Action.model.ts

export class ActionModel {
  id: number;
  datetime: string;
}

and changing the UserModel

import {ActionModel} from './Action.Model';

export class UserModel {
  id: number;
  name: string;
  actions: ActionModel[];
}

This works locally but on Azure Dev Ops I get

ERROR in src/Models/User.model.ts(1,27): error TS2307: Cannot find module './Action.Model'.

##[error]Bash exited with code '1'

I've not changed any Angular config files, they are all default for new project. The azure pipelines yml is

# Node.js with Angular
# Build a Node.js project that uses Angular.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod
  displayName: 'npm install and build'

Maybe try to add . to ./Action.Model (../Action.Model) — Shayki Abramczyk
– Shayki Abramczyk, Commented Jun 26, 2019 at 13:52
@ShaykiAbramczyk Sadly that doesn't help :( The models are in the same folder as each other though, so I guess it was a longshot, but I am confused with this — CodeMonkey
– CodeMonkey, Commented Jun 26, 2019 at 15:00
You can fix it when you try to build your application By using baseHref AND deployUrl — samir romdhani
– samir romdhani, Commented Jun 27, 2019 at 10:51

Mengdi Liang · Accepted Answer · 2019-06-27 10:30:27Z

9

According to your code, I notice that you are using Ubuntu agent which is case sensitive.

And also, the module you configured is "Action.model", but while import, the name you used is "Action.Model". For ubuntu and linux, it could not be identified as same because of its case sensitive.

I think you may execute these script locally with windows which is case insensitive. That's why it's worked locally.

So, for solved, you need to change your script as :

import {ActionModel} from './Action.model';

export class UserModel {
  id: number;
  name: string;
  actions: ActionModel[];
}

answered Jun 27, 2019 at 10:30

Mengdi Liang

19.3k2 gold badges35 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CodeMonkey Over a year ago

That fixed it! Thanks, and well spotted :)

Collectives™ on Stack Overflow

Angular build cannot find module with relative path (on azure dev ops)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related